<template>
  <div class="container">
    <div class="calendar-header">
      <!-- v-model绑定选中值, Options传递可选列表-->
      <div class="year-control">
        <Selected v-model="selectedYear" :options="Years"></Selected>
      </div>
      <div class="month-controls">
        <span class="arrow-left" @click="changeMonth(-1)"><</span>
        <Selected v-model="selectedMonth" :options="Months"></Selected>
        <span class="arrow-right" @click="changeMonth(1)">></span>
      </div>
      <div class="today" @click="goToToday">今天</div>
    </div>

    <!-- 日历面板 year传入年份 month传入月份 selectedDay将选中的天号暴露出来 -->
    <CalendarMonth
      :year="selectedYear"
      :month="selectedMonth"
      @selectedDay="handleSelectedDay"
    ></CalendarMonth>

    <div class="calendar-footer">
      <div class="text" v-bind="text">

        <div class="left">
          <h3>{{ text.lunar }}</h3>
          <div>{{ text.lunarYear + text.animalsYear + "年" }}</div>
        </div>

        <div class="right">
          <div>
            <span style="background-color: red">宜</span>
            <span>{{ text.suit }}</span>
          </div>
          <div>
            <span style="background-color: black; color: white;">忌</span>
            <span>{{ text.avoid }}</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
// 引入自定义下拉菜单组件
import Selected from "@/components/Selected.vue"
// 引入自定义面板组件
import CalendarMonth from "./CalendarMonth.vue"

// 年份   双向绑定
const selectedYear = ref(new Date().getFullYear()) //当前年份
// 定义可选年份列表
const Years = []
for (let i = 1900; i <= 2050; i++) {
  Years.push(i)
}

// 月份   双向绑定
const selectedMonth = ref(new Date().getMonth() + 1) // 当前月份 1月=0
const Months = []
for (let i = 1; i <= 12; i++) {
  Months.push(i)
}
// 改变月份
function changeMonth(offset) {
  selectedMonth.value += offset
  if (selectedMonth.value < 1) {
    selectedMonth.value = 12
    selectedYear.value -= 1
  } else if (selectedMonth.value > 12) {
    selectedMonth.value = 1
    selectedYear.value += 1
  }
}

// 回到今天
function goToToday() {
  selectedYear.value = new Date().getFullYear()
  selectedMonth.value = new Date().getMonth() + 1
}

// 日期详情
import axios from "axios"
const text = ref("") //日期详情
const apiUrl = "http://v.juhe.cn/calendar/day"
const apiKey = "ac1e38bc7821c4c3d654d00216554b5d" // 在个人中心->我的数据,接口名称上方查看
function handleSelectedDay(day) {
  console.log('选中的日期:', `${selectedYear.value}-${selectedMonth.value}-${day}`);
  // 发送请求
  axios.get('/calendar/day', {
    params: {
      key: apiKey,
      date: `${selectedYear.value}-${selectedMonth.value}-${day}`
    }
  }).then(res => {
    console.log('日期详情:', res.data.result.data);
    text.value = res.data.result.data
    console.log(text.value.suit)
  })

  // 请求成功 先使用模拟数据
  // text.value = {
  //   animalsYear: "蛇",
  //   weekday: "星期四",
  //   lunarYear: "乙巳",
  //   lunar: "闰六月廿一",
  //   "year-month": "2025-8",
  //   date: "2025-8-14",
  //   avoid: "诸事不宜",
  //   desc: "",
  //   holiday: "",
  //   suit: "安葬.祭祀.入殓.移柩.馀事勿取.成服.除服.结网.迁坟",
  // }
}
import { onMounted } from "vue"
onMounted(() => {
  handleSelectedDay(new Date().getDate())
})
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  background: linear-gradient(to bottom, rgba(204, 229, 255, 1) 0%, rgba(224, 229, 236, 0.8) 30%, rgba(224, 229, 236, 0.8) 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    8px 8px 16px #b8bdc5,
    -8px -8px 16px #ffffff;
  cursor: pointer;
}

.calendar-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.calendar-header > div {
  display: flex;
  align-items: center;
}

.year-control {
  flex-grow: 1;
  margin-right: 10px;
}

.month-controls {
  flex-grow: 1;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.today {
  text-align: center;
  flex-grow: 2;
}

.calendar-header .custom-select {
  margin: 0 5px;
}

.month-controls .custom-select {
  margin: 0 5px;
}

.calendar-header span {
  font-weight: bold;
  color: #4d535f;
  font-size: 18px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e0e5ec;
  box-shadow:
    3px 3px 6px #b8bdc5,
    -3px -3px 6px #ffffff;
  transition: all 0.2s ease;
  margin: 0 2px;
}

.calendar-header span:hover {
  box-shadow:
    2px 2px 4px #b8bdc5,
    -2px -2px 4px #ffffff;
}

.calendar-header span:active {
  box-shadow:
    inset 2px 2px 4px #b8bdc5,
    inset -2px -2px 4px #ffffff;
}

.calendar-header .today {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    3px 3px 6px #b8bdc5,
    -3px -3px 6px #ffffff;
  color: #4d535f;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.calendar-header .today:hover {
  box-shadow:
    2px 2px 4px #b8bdc5,
    -2px -2px 4px #ffffff;
}

.calendar-header .today:active {
  box-shadow:
    inset 2px 2px 4px #b8bdc5,
    inset -2px -2px 4px #ffffff;
}

.calendar-footer {
  width: 100%;
  margin-top: 20px;
  padding: 15px 20px;
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow: 
    inset 3px 3px 6px #b8bdc5, 
    inset -3px -3px 6px #ffffff;
}

.calendar-footer .text{
  display: flex;
  gap: 20px;
  color: #4d535f;
  font-weight: 500;
}

.calendar-footer .text .left {
  flex: 1;
}

.calendar-footer .text .left h3 {
  color: black;
}

.calendar-footer .text .right {
  flex: 2;
}

.calendar-footer .text .right div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.calendar-footer .text .right span:first-child {
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  font-weight: bold;
}
</style>

